<template>
  <div>
    <h1>添加分类</h1>
    <el-form label-width="100px" :model="forminfo" :rules="rules" ref="forminfo">
      <el-form-item label="上级分类" prop="pid">
        <el-select v-model="forminfo.pid" placeholder="请选择父级">
          <el-option label="请选择" value></el-option>
          <el-option label="顶级分类" :value="0"></el-option>
          <el-option
            v-for="item in categorylist"
            :label="item.catename"
            :value="item.id"
            :key="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="分类名称" prop="catename">
        <el-input v-model="forminfo.catename"></el-input>
      </el-form-item>
      <el-form-item label="分类图片" prop="img">
        <!-- 上传组件 -->
        <!-- action 属性： 上传地址！ 如果写了地址，那么选择图片之后就会自动上传！  -->
        <!-- list-type属性： 上传控件的类型 -->
        <!-- file-list属性： 文件列表  [{name:'',url:""}] -->
        <!-- limit属性：上传最大个数 -->
        <!-- on-change: 图片变了的时候 -->
        <!-- name属性： 上传的对应字段 -->
        <!-- auto-upload:是否自动上传 -->
        <el-upload
          action="#"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :file-list="fileList"
          :limit="1"
          :on-change="fileChange"
          :auto-upload="false"
          :on-exceed="limitImg"
        >
          <i slot="default" class="el-icon-plus"></i>
        </el-upload>
        <!-- 弹框 -->
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt />
        </el-dialog>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio v-model="forminfo.status" :label="1">正常</el-radio>
        <el-radio v-model="forminfo.status" :label="0">禁用</el-radio>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-if="!$route.params.id" @click="submit">立即添加</el-button>
        <el-button type="success" v-else @click="submit">立即修改</el-button>
        <el-button>重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: "",
  data() {
    return {
      forminfo: {
        pid: "", // 父级id
        catename: "", // 分类名称
        img: "", // 分类图片
        status: 1, // 状态
      },
      rules: {
        // 表单的验证规则
        catename: [
          { required: true, message: "分类名称必须写", trigger: "blur" },
        ],
        pid: [{ required: true, message: "上级分类必须选", trigger: "blur" }],
      },
      categorylist: [], //分类列表,用于下拉列表
      dialogVisible: false, // 弹框
      dialogImageUrl: "", // 弹框图片地址
      fileList: [], // 上传文件列表
    };
  },
  created() {
    // 下拉框中的数据需要发请求获取！！！！
    // categorylist这个数据对应下拉框的数据，用v-for显示
    // this.getlist(); // 获取列表
    if (this.$route.params.id) {
      // 获取修改的这一条的数据，赋给表单！
      // this.getinfo(this.$route.params.id);
    }
  },
  methods: {
    // 提交
    async submit() {
      // 表单验证
        if (true) {
          // 发送请求！
          // 使用FormData提交数据！
          let formdata = new FormData();
          // for in的作用是遍历对象，将forminfo中的数据放到formdata
          for (let key in this.forminfo) {
            // append的作用是将forminfo中的数据逐一添加到formdata中
            formdata.append(key, this.forminfo[key]);
          }
          // 直接打印formdata只会显示空对象
          console.log(111,formdata);
          // 需要遍历formdata，逐一打印，才能显示！！！！！！
          formdata.forEach((value, key) => {
            console.log("key %s: value %s", key, value);
          })
          return
          let res;
          if (this.$route.params.id) {
            formdata.append("id", this.$route.params.id); // 给表单数据添加上id
            res = await editCategory(formdata); // 修改请求
          } else {
            // 提交的是formdata实例对象
            res = await addCategory(formdata); // 添加请求
          }
          if (res) {
            this.$router.back();
          }
        } else {
          this.$message.warn("验证不通过");
        }
    },
    // 上传控件的相关事件
    handlePictureCardPreview(file) {
      // 预览事件
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    fileChange(file) {
      // 文件改变时候触发
      // file.raw 才是原生的文件信息！
      // 打印file看看他的真容！！！！
      console.log(file);
      this.forminfo.img = file.raw;
    },
    // 超出限制时触发
    limitImg() {
      this.$message.warning("分类图片最多添加1个");
    },
  },
};
</script>
<style lang="">
</style>